<template>
  <KView class="personal-center">
    <KView class="peronal-bg">
      <img :src="bgImg" mode="widthFix">
    </KView>
    <KView class="personal-center-content">
      <KView class="personal-title">
        <span>个人中心</span>
        <KView class="personal-center-remind" @click="remind">
          <img class="sys-img" :src="remindImg" mode="aspectFit">
        </KView>
      </KView>
      <template v-if="isShow">
        <KView class="personal-info-div personal-center-plane">
          <KView class="personal-info clearfix">
            <KView class="personal-avatar">
              <sys-avatar :url="user.headimgurl" shape="circle"></sys-avatar>
            </KView>
            <KView class="personal-data">
              <KView class="ellipsis personal-username">{{user.nickname}}</KView>
              <KView class="ellipsis personal-phone clearfix" @click="toBindPhone">
                <KView class="personal-phone-img">
                  <sys-svg name="phone2" color="#58bf62"></sys-svg>
                </KView>
                <KView v-if="user.phoneNum===''" class="personal-phone-text">点击绑定手机号</KView>
                <phone-num-view v-else class="personal-phone-text" :phone-num="user.phoneNum"></phone-num-view>
              </KView>
            </KView>
            <KView class="personal-sign">
              <KView class="personal-sign-btn" @click="toSign">今日签到</KView>
            </KView>
          </KView>
          <KView class="personal-center-line"></KView>
          <KFlex class="personal-order">
            <KFlexItem v-for="(menu,index) in orderMenus" :key="`order_${index}`">
              <KView class="personal-order-item" @click="orderMenuClick(menu)">
                <KView class="personal-order-img">
                  <img class="sys-img" :src="menu.img" mode="aspectFit">
                </KView>
                <KView class="personal-order-text">{{menu.label}}</KView>
              </KView>
            </KFlexItem>
            <KFlexItem></KFlexItem>
            <KFlexItem></KFlexItem>
          </KFlex>
        </KView>
        <KView class="personal-center-handle personal-center-plane">
          <personal-classify :classify-list="classifyTypeList" @menu-click="handleClick"></personal-classify>
        </KView>
      </template>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import SystemUtil from 'utils/systemUtil';

  import SysAvatar from 'common/sysAvatar';
  import SysSvg from 'common/sysSvg';
  import PersonalClassify from './personalClassify';
  import PhoneNumView from './phoneNumView';

  import storeMixins from 'mixins/storeMixins';
  import PersonalCenterApi from 'services/personalCenterApi';

  export default {
    mixins: [storeMixins],

    data() {
      let imgData = GlobalData.images.personalCenter;
      return {
        isShow: false,
        bgImg: imgData.bg,
        remindImg: imgData.remind,
        orderMenus: [{
            label: "全部订单",
            img: imgData.allOrder,
            path: "/goodsOrder"
          }, {
            label: "待付款",
            img: imgData.payment,
            path: "/goodsOrder?type=toPay"
          }
          // , {
          //   label: "待发货",
          //   img: imgData.deliverGoods,
          //   path: ""
          // }, {
          //   label: "待收货",
          //   img: imgData.receiveGoods,
          //   path: ""
          // }
        ],
        isMiniprogram: process.env.isMiniprogram,
        classifyTypeList: []
      };
    },

    created() {
      SystemUtil.showLoading();
      this.setClassifyTypeList().then(() => {
        this.isShow = true;
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setClassifyTypeList() {
        return PersonalCenterApi.getPersonalClassifyData().then(classifyTypeList => {
          this.classifyTypeList = classifyTypeList;
          return classifyTypeList;
        });
      },

      toSign() {
        SystemUtil.alert('即将开放，敬请期待！', '提示');
        // if (this.isMiniprogram) {
        //   window.open('/daySign');
        //   return;
        // }
        // location.href = '/classfiy';
      },

      remind() {
        if (this.isMiniprogram) {
          window.open('/remindPage');
        }
      },

      orderMenuClick(menu) {
        let path = menu.path;
        if (path === '') {
          SystemUtil.alert('即将开放，敬请期待！', '提示');
          return;
        }
        if (this.isMiniprogram) {
          window.open(path);
        }
      },

      handleClick(menu) {
        let path = menu.path;
        if (path === '') {
          SystemUtil.alert('即将开放，敬请期待！', '提示');
          return;
        }
        if (this.isMiniprogram) {
          window.open(path);
        }
      },

      toBindPhone() {
        if (this.user.phoneNum !== '') {
          return;
        }
        if (this.isMiniprogram) {
          window.open('/bindPhone');
        }
      }
    },

    components: {
      SysAvatar,
      SysSvg,
      PersonalClassify,
      PhoneNumView
    }
  };

</script>

<style lang="scss">
  .personal-center {
    height: 100%;
    position: relative;

    .peronal-bg {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: -1;

      >img {
        width: 100%;
      }
    }

    .personal-center-content {
      width: calc(100% - #{formatPx(60)});
      padding: 0 formatPx(30);
      overflow: auto;

      @if $isMini {
        height: calc(100% - #{formatPx(30)});
      }

      @else {
        padding-top: formatPx(30);
        height: calc(100% - #{formatPx(60)});
      }

      .personal-title {
        text-align: center;
        color: #ffffff;
        font-size: formatPx(36);
        position: relative;

        .personal-center-remind {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: formatPx(40);
        }
      }

      .personal-center-plane {
        box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
        border-radius: formatPx(8);
        background: #ffffff;
      }

      .personal-center-line {
        height: 1px;
        background: #DADADA;
      }

      .personal-info-div {
        margin-top: formatPx(45);
        padding: formatPx(45) 0;

        .personal-info {
          height: formatPx(140);
          margin-bottom: formatPx(35);
          padding-left: formatPx(35);

          >div {
            float: left;
            height: 100%;
          }

          .personal-avatar {
            width: formatPx(135);
            height: formatPx(135);
          }

          .personal-data {
            width: calc(100% - #{formatPx(338)});
            font-size: formatPx(26);
            padding: 0 formatPx(30);

            >div {
              margin-bottom: formatPx(15);

              &:last-child {
                margin-bottom: 0;
              }
            }

            .personal-username {
              font-size: formatPx(30);
            }

            .personal-phone {
              height: formatPx(40);

              >div {
                float: left;
                height: 100%;
              }

              .personal-phone-img {
                width: formatPx(30);
              }

              .personal-phone-text {
                width: calc(100% - #{formatPx(50)});
                margin-left: formatPx(15);
                line-height: formatPx(40);
              }
            }
          }

          .personal-sign {
            width: formatPx(143);
            float: right;

            .personal-sign-btn {
              width: 100%;
              height: formatPx(60);
              background: #59C163;
              color: #ffffff;
              font-size: formatPx(26);
              line-height: formatPx(60);
              margin-top: formatPx(40);
              text-align: center;
              border-top-left-radius: formatPx(30);
              border-bottom-left-radius: formatPx(30);
            }
          }
        }

        .personal-order {
          margin-top: formatPx(45);

          .personal-order-item {
            width: formatPx(120);
            margin: auto;

            .personal-order-img {
              width: 100%;
              height: formatPx(50);
            }

            .personal-order-text {
              font-size: formatPx(26);
              color: #565961;
              text-align: center;
              margin-top: formatPx(20);
            }
          }
        }
      }

      .personal-center-handle {
        padding: formatPx(45) 0;
        margin-top: formatPx(45);
      }
    }
  }

</style>
